<template>
  <div class="" ref="parent" :style="chartsDom">
    
    <div style="height:50%;width:100%;margin:0">
      <el-row style="height:100%;width:100%;margin:0">
        <el-col :span="6">
          <div class="data-item">
            <p class="label">政府服务</p>
            <div class="value" v-show="jz">86</div>
             <animae-jz  class="value" v-if="!jz"></animae-jz>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">党建会议</p>
            <div class="value" v-show="jz2">789</div>
             <animae-jz class="value" v-if="!jz2"></animae-jz>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">党建活动</p>
            <div class="value"  v-show="jz3">44</div>
             <animae-jz  class="value" v-if="!jz3"></animae-jz>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">党风廉政</p>
            <div class="value"  v-show="jz3">135</div>
             <animae-jz  class="value" v-if="!jz3"></animae-jz>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="height:50%;width:100%">
      <el-row>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">网格管理员</p>
            <div class="value" v-show="jz">76</div>
             <animae-jz  class="value" v-if="!jz"></animae-jz>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">网格规划区</p>
            <div class="value" v-show="jz2">56</div>
             <animae-jz class="value" v-if="!jz2"></animae-jz>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">社区活动</p>
            <div class="value"  v-show="jz3">123</div>
             <animae-jz  class="value" v-if="!jz3"></animae-jz>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="data-item">
            <p class="label">社区商圈</p>
            <div class="value"  v-show="jz3">1334</div>
             <animae-jz  class="value" v-if="!jz3"></animae-jz>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {
  get_TalentIn_CurrentEmployee,
  get_TalentIn_ExternalTalent,
  get_TalentIn_SchoolTalent
} from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      employee: null,
      externalTalent: null,
      schoolTalent: null,
      jz:true,
      jz2:true,
      jz3:true,
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val  + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        'text-align': 'center',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
    //   this.jz=false
    //   this.jz2=false
    //   this.jz3=false
    //   get_TalentIn_CurrentEmployee()
    //   .then(({data:{data}})=>{
    //     this.jz=true
    //     this.employee = data;
    //   });
    //   get_TalentIn_ExternalTalent()
    //   .then(({data:{data}})=>{
    //     this.jz2=true
    //     this.externalTalent = data;
    //   });
    //   get_TalentIn_SchoolTalent()
    //   .then(({data:{data}})=>{
    //     this.jz3=true
    //     this.schoolTalent = data;
    //   });
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .data-item
    padding 8px 10px
    background-color #123
    text-align center
    border-radius 5px
    width 120px
    height 54px
    display inline-block
    margin 0 0 5px 0
    .label
      font-size 14px
      color #ffffff
    .value
      font-size 24px
      color #8ebafb
      font-weight bold
      margin-top 5px
</style>